<template>
  <div class="address-section">
    <h3 class="section-title">收货地址</h3>
    <el-button type="primary" @click="showDialog = true">
      <el-icon><Plus /></el-icon> 添加新地址
    </el-button>

    <div class="address-list">
      <el-card 
        v-for="address in addresses" 
        :key="address.addressId" 
        class="address-card"
        :class="{ 'default-address': address.addressStatus===0 }"
      >
        <div class="address-header">
          <span class="receiver">{{ address.addressName }}</span>
          <span class="phone">{{ address.addressTelno }}</span>
          <el-tag v-if="address.isDefault" type="warning" size="small">默认</el-tag>
        </div>
        <div class="address-content">
          {{ address.addressProvince }}{{ address.addressCity }}{{ address.addressArea }}{{ address.addressDetail }}
        </div>
        <div class="address-actions">
          <el-button 
            v-if="!address.isDefault" 
            size="small" 
            @click="$emit('set-default', address.addressId)"
          >
            设为默认
          </el-button>
          <el-button size="small" @click="$emit('edit-address', address)">编辑</el-button>
          <el-button size="small" type="danger" @click="$emit('delete-address', address.id)">
            删除
          </el-button>
        </div>
      </el-card>
    </div>

    <el-dialog v-model="showDialog" title="添加新地址" width="500px">
      <el-form :model="newAddress" label-width="80px">
        <el-form-item label="收货人" required>
          <el-input v-model="newAddress.receiver" />
        </el-form-item>
        <el-form-item label="手机号码" required>
          <el-input v-model="newAddress.phone" />
        </el-form-item>
        <el-form-item label="所在地区" required>
          <v-region
            v-model="newAddress.region"
            :town="false"
            class="region-selector"
          />
        </el-form-item>
        <el-form-item label="详细地址" required>
          <el-input v-model="newAddress.detail" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="newAddress.isDefault">设为默认地址</el-checkbox>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="saveAddress">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

defineProps({
  addresses: {
    type: Array,
    required: true
  }
})

defineEmits(['edit-address', 'set-default', 'delete-address'])

const showDialog = ref(false)
const newAddress = ref({
  receiver: '',
  phone: '',
  region: {},
  detail: '',
  isDefault: false
})

const saveAddress = () => {
  console.log('保存地址:', newAddress.value)
  showDialog.value = false
  // 实际项目中这里应该调用API保存地址
}
</script>

<style scoped>
.address-section {
  padding: 20px;
}

.section-title {
  margin: 0 0 20px;
  color: #333;
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.address-list {
  margin-top: 20px;
  display: grid;
  gap: 15px;
}

.address-card {
  position: relative;
}

.default-address {
  border-color: #ff9500;
  background-color: #fff9f0;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.receiver {
  font-weight: bold;
  margin-right: 10px;
}

.phone {
  color: #666;
  margin-right: 10px;
}

.address-content {
  color: #333;
  line-height: 1.5;
  margin-bottom: 15px;
}

.address-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.region-selector {
  width: 100%;
}
</style>